<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>五星红旗</title>
	<style>
		*{
            margin: 0;
            padding: 0;
        }
        /** 
         * 三角形
         */
        /* 第一步 */
		/* .triangle-box {
			width: 100px;
			height: 100px;
			background-color: pink;
			border: 100px;
			border-style:solid;
			border-color: #FF0000 #90EE90 #8EE5EE #919191;
		} */
		/* 第二步，宽和高改为0 */
		 .triangle-box {
		 	display: inline-block;
			width: 0;
			height: 0;
			background-color: pink;
			border: 100px;
			border-style:solid;
			border-color: #FF0000 #90EE90 #8EE5EE #919191;
		} 
		/**
		 * 向上三角形
		 * 将下、右、左边框设置为transparent（透明）
		 */
		.triangle-up {
			display: inline-block;
			margin-top: 20px;
			width: 0;
			height: 0;
			border-right: 100px solid transparent;
			border-left: 100px solid transparent;
			border-bottom: 100px solid black;
		}
		/* 向下三角形 */
		.triangle-down {
			display: inline-block;
			margin-top: 20px;
			width: 0;
			height: 0;
			border-right: 100px solid transparent;
			border-left: 100px solid transparent;
			border-top: 100px solid black;
		}
		/* 向左三角形 */
		.triangle-left {
			display: inline-block;
			margin-left: 20px;
			width: 0;
			height: 0;
			border-top: 100px solid transparent;
			border-bottom: 100px solid transparent;
			border-right: 100px solid black;
		}
		/* 向右三角形 */
		.triangle-right {
			display: inline-block;
			margin-left: 20px;
			width: 0;
			height: 0;
			border-top: 100px solid transparent;
			border-bottom: 100px solid transparent;
			border-left: 100px solid black;
		}
		/* 直角三角形 */
		.right-angle {
			display: inline-block;
			margin-left: 50px;
			width: 0;
			height: 0;
			border-top: 100px solid #f00;
			border-right: 100px solid transparent;
			/*border-left: 100px solid transparent;
			 border-bottom: 100px solid pink; */
		}



		/**
		 * 五角星
		 * 三个三角形旋转组成
		 */
		.pentagram {
			width: 100%;
			height: 200px;
			margin-top: 50px;
			padding: 20px;
		}
		/* 第一步，第一个大的向下三角形 */
		.pentagram-down {
			position: relative;
			width: 0;
			height: 0;
			border-right: 100px solid transparent;
			border-left: 100px solid transparent;
			border-top: 70px solid yellow;
		}
		/* 第二步，通过伪元素复制两个三角形 */
		.pentagram-down:before,
		.pentagram-down:after {
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-right: 100px solid transparent;
			border-left: 100px solid transparent;
			border-top: 70px solid yellow;
		}
		/* 第三步，旋转角度拼接为五角星 */
		.pentagram-down:before {
			position: absolute;
			transform: rotate(74deg);
			left: -100px;
			top: -70px;
		}
		.pentagram-down:after {
			position: absolute;
			transform: rotate(-70deg);
			left: -95px;
			top: -69px;
		}



        /* 五星红旗 */
		.container {
			position: relative;
			width: 600px;
			height: 400px;
			background-color: #f00;
			padding: 20px;
			margin-left: 100px;
		}
		.star {
			position: absolute;
			top: 40px;
			left: 60px;
			width: 0;
			height: 0;
			border-right: 50px solid transparent;
			border-left: 50px solid transparent;
			border-top: 30px solid yellow;
		}
		.star:before,
		.star:after {
			content: '';
			display: block;
			width: 0;
			height: 0;
			border-right: 50px solid transparent;
			border-left: 50px solid transparent;
			border-top: 30px solid yellow;
		}
		.star:before {
			position: absolute;
			transform: rotate(74deg);
			left: -50px;
			top: -30px;
		}
		.star:after {
			position: absolute;
			transform: rotate(-74deg);
			left: -50px;
			top: -28px;
		}
		.star-item2 {
			transform: scale(.3,.3) rotate(55deg) translate(100px,-280px);
		}
		.star-item3 {
			transform: scale(.3,.3) rotate(70deg) translate(200px,-350px);
		}
		.star-item4 {
			transform: scale(.3,.3) rotate(15deg) translate(390px,150px);
		}
		.star-item5 {
			transform: scale(.3,.3) rotate(50deg) translate(350px,100px);
		}
	</style>
</head>
<body>
	<div class="triangle-box"></div>
	<div class="triangle-up"></div>
	<div class="triangle-down"></div>
	<div class="triangle-left"></div>
	<div class="triangle-right"></div>
	<div class="right-angle"></div>


	<div class="pentagram">
		<div class="pentagram-down"></div>
	</div>
	<div class="container">
		<div class="star star-item1"></div>
		<div class="star star-item2"></div>
		<div class="star star-item3"></div>
		<div class="star star-item4"></div>
		<div class="star star-item5"></div>
	</div>
</body>
</html>